<template>
  <div class="details-mobile">
    <!-- 页头 -->
    <div class="yetou">
      <div class="none1">
      <div class="bt-left">
        <h1>万力达消防设备大卖场</h1>
        <p>{{configData.mobile}}</p>
      </div>
      <div class="menu">
      <img  @click="hide = !hide" src="../assets/991.jpg" />
      </div>
      </div>
    </div>
     <!--导航开始-->
    <div class="vae" v-show="hide">
      <ul class="nav-tb">
        <li :class="navmoIndex == 0 ? 'active' : ''" @click="selNav(0)">
          <router-link to="/page/home_mobile">首页</router-link>
          <!-- <a href="#">首页</a> -->
        </li>
        <li :class="{ active: navmoIndex === 1 }" @click="selNav(1)">
          <router-link to="/page/product_mobile">消防水泵</router-link>
          <!--  <a href="#">消防水泵</a> -->
        </li>
        <li :class="{ active: navmoIndex === 2 }" @click="selNav(2)">
          <router-link to="/page/product_mobile">水泵控制柜</router-link>
          <!-- <a href="#">水泵控制柜</a> -->
        </li>
        <li :class="{ active: navmoIndex === 3 }" @click="selNav(3)">
          <router-link to="/page/product_mobile">气体灭火</router-link>
          <!--  <a href="#">气体灭火</a> -->
        </li>
        <li :class="{ active: navmoIndex === 4 }" @click="selNav(4)">
          <router-link to="/page/product_mobile">火灾报警</router-link>
          <!--     <a href="#">火灾报警</a> -->
        </li>
        <li :class="{ active: navmoIndex === 5 }" @click="selNav(5)">
          <router-link to="/page/product_mobile">产品中心</router-link>
          <!-- <a href="#">产品中心</a> -->
        </li>
        <li :class="{ active: navmoIndex === 6 }" @click="selNav(6)">
          <router-link to="/page/witness_mobile">客户见证</router-link>
          <!-- <a href="#">客户见证</a> -->
        </li>
        <li :class="{ active: navmoIndex === 7 }" @click="selNav(7)">
          <router-link to="/page/news_mobile">新闻动态</router-link>
          <!-- <a href="#">新闻动态</a> -->
        </li>
        <li :class="{ active: navmoIndex === 8 }" @click="selNav(8)">
          <router-link to="/page/about_mobile">关于我们</router-link>
          <!--  <a href="#">关于我们</a> -->
        </li>
      </ul>
    </div>
    <!--导航结束-->
    <!-- 页头 -->
    <!-- 横幅 -->
    <div class="qwe">
      <img src="../assets/111.jpg" />
    </div>
    <!-- 横幅 -->
    <!-- 产品详情开始 -->
    <div class="core">
      <div class="core_top">
        <h5>当前位置：首页>>关于我们>>产品中心</h5>
        <div class="core1">
          <div class="core_left">
            <img :src="showimg?showimg:shopDetail.img[0]" />
          </div>
          <div class="core_right">
           <div class="bbq">
                <swiper ref="dtswiper" class="swiper dtswiper" :options="swiperOptions">
                  <div class="swiper-slide">
                    <img v-for="item in shopDetail.img" :key="item" :src="item" @click.stop="showimg=item" />
                    <!-- <img v-for="item in shopDetail.img" :key="item" :src="item" alt />
                    <img v-for="item in shopDetail.img" :key="item" :src="item" alt /> -->
                  </div>
                  <!-- <div class="swiper-slide" v-for="item in shopDetail.img" :key="item">
                    <img :src="item" alt />
                  </div> -->
                  <!-- <div class="swiper-slide" v-for="item in shopDetail.img" :key="item">
                    <img :src="item" alt />
                  </div> -->
                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
              </div>
          </div>
        </div>
      </div>
      <div class="core_foot" v-html="shopDetail.content">
        <!-- <img src="../assets/124.jpg" /> -->
      </div>
    </div>
    <!-- 产品详情结束 -->
     <!--脚部开始-->
    <div class="foot">
      <div class="foot_top">
        <div class="who">
          <h1>联系我们</h1>
          <p>服务热线：{{configData.mobile}}</p>
          <p>QQ：{{configData.qq}}</p>
          <p>地址：{{configData.city}}</p>
        </div>
      </div>
      <div class="foots">
        <div class="whoo">
          <p>
            {{configData.copyright}}<br />
            {{configData.record_number}}
          </p>
        </div>
      </div>
    </div>
    <!--脚部结束-->
  </div>
</template>

<script  scoped>
export default {
   data() {
    return {
      navmoIndex: 0,
      hide: false,
      shopDetail: {},
      configData: {},
      swiperOptions: {
        notNextTick: false,
        direction: 'vertical',
        slidesPerView: 1,
        // spaceBetween: 20,
        // loop: true,
        // autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      showimg: ''
    };
  },
  created() {
    if (localStorage.getItem("navmoIndex")) {
      this.navmoIndex = +localStorage.getItem("navmoIndex");
      console.log(this.navmoIndex);
    }
  },
  mounted(){
    console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.getShopDetail(this.$route.query.id)
    }
    this.getConfig();
  },
  methods: {
        getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    selNav(a) {
      this.navmoIndex = a;
      localStorage.setItem("navmoIndex", this.navmoIndex);
      console.log(a, this.navmoIndex);
    },
     getShopDetail(id) { // 商品详情
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index_info?id="+id)
        .then((res) => {
          console.log("商品详情", res.data.result);
          this.shopDetail = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style>
.details-mobile {
  max-width: 7.5rem;
  margin: 0 auto;
}
/* 页头 */
.yetou{
  color: #fff;
  background: #0061ae ;
  height: 1.4rem;
}
.none1 {
  width: 6.9rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.bt-left{
  padding: 0.1rem;
}
.bt-left h1{
  font-size:0.45rem;
}
.bt-left p{
  font-size: 0.35rem;
}
.menu img {
  width: 0.8rem;
}

/* 页头 */
/* 导航开始*/
.nav-tb {
  width: 100%;
  text-align: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}
.vae a {
  display: block;
  border: 1px solid #ededed;
  padding: 0.2rem;
  line-height: 0.4rem;
}
.nav-tb li{
  width: 2.5rem;
}
.nav-tb a:hover {
  color: #ffffff;
  background: #d6af62;
}
/* 导航结束*/
/* 横幅 */
.qwe img {
  width: 100%;
}
/* 横幅 */
/* 产品详情开始*/
.core {
  width: 7rem;
  margin: 0 auto;
}
.core1 {
  margin-top: 0.04rem;
  display: flex;
  margin-bottom: 0.1rem;
}
.core_left img {
  width: 5.2rem;
  float: left;
  overflow: hidden;
  border: 1px solid #c2c2c2;
}
.core_right {
  width: 1.45rem;
  height: 5.2rem;
  float: left;
  overflow: hidden;
  margin-left: 0.3rem;
  box-sizing: border-box;
}
.core_right .bbq{
  height: 100%;
}
.core_right img {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid #c2c2c2;
}
.core_right .swiper-slide{
  /* box-sizing: border-box;
  border: 1px solid #c2c2c2; */
}
.swiper-slide img{
  margin-bottom: 0.05rem;
}
.core_foot img {
  /* width: 6.9rem; */
  width: 100% !important;
  height: auto !important;
  margin: 0 auto;
}
/* 产品详情结束 */
/* 页脚开始 */
.foot_top {
  line-height: 0.45rem;
  margin: 0 auto;
  background: #0061ae;
  color: #fff;
  overflow: hidden;
}
.foot_top h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
}
.foot_top p {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  padding-bottom: 0.1rem;
}
.foots {
  line-height: 0.4rem;
  margin: 0 auto;
  background: #666;
  color: #fff;
}
.foots p {
  font-size: 0.2rem;
  text-align: center;
}
.who,
.whoo {
  width: 7rem;
  margin: 0 auto;
}
/* 页脚结束 */
</style>